<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>My first three.js app</title>
		<!-- <script src="./three.js"></script> -->
		<!-- <script src="./TransformControls.js?a=1"></script> -->
		<style>
			body { margin: 0; }
			#canvasdiv { width: 800px; height: 800px; }
		</style>
	</head>
	<body>
		<div id="canvasdiv"></div>
		
		<script type="module">
			import * as THREE from "./three.js";
			import {TransformControls} from "./TransformControls.js";
			document.onload = init()
			function init(){
				var container = document.getElementById('canvasdiv')
				var objectPositionOnDown = null;
				var objectRotationOnDown = null;
				var objectScaleOnDown = null;
				// scene
				var scene = new THREE.Scene();
				scene.background = new THREE.Color(11184810);//灰色
				
				// camera
				var camera = new THREE.PerspectiveCamera(90,1,0.01,1e3);
				camera.position.set(15, 15, 0);
				camera.lookAt(new THREE.Vector3());
				camera.name = "Camera";

				var width = canvasdiv.clientWidth;
				var height = canvasdiv.clientHeight;
				var renderer = new THREE.WebGLRenderer();
				renderer.setSize( width, height );
				canvasdiv.appendChild( renderer.domElement );
				var material = new THREE.MeshBasicMaterial({ color: 16711680,wireframe:true })
				var material3 = new THREE.MeshBasicMaterial({ color: 16711680,wireframe:true })
				var material4 = new THREE.MeshBasicMaterial({ color: 15627680,wireframe:true })
				var material5 = new THREE.MeshBasicMaterial({ color: 12345680,wireframe:true })
				var material6 = new THREE.MeshBasicMaterial({ color: 15622345,wireframe:true })
				// object
				// var geometry = new THREE.SphereGeometry(6,1,1);
				var geometry = new THREE.BoxGeometry(2,2,2);
				var ball = new THREE.Mesh( geometry,[material6,material3,material6,material6,material6,material6] );
				ball.position.set( 5,5,6 );
				scene.add(ball);
				var geometry3 = new THREE.SphereBufferGeometry(2,16,16);
				
				var ball3 = new THREE.Mesh( geometry3,material3 );
				ball3.position.set( 10,5,6 );
				// scene.add(ball3);
				var geometry4 = new THREE.CylinderBufferGeometry(3, 3, 3, 8);

				var ball4 = new THREE.Mesh( geometry4,[material,material3,material] );
				ball4.position.set( 1,8,2 );
				// scene.add(ball4);
				// transform
				var transformControls = new TransformControls(camera, renderer.domElement);
				transformControls.setMode(["rotate"])
				// transformControls.setMode("translate")
				transformControls.setSpace("local");
				transformControls.addEventListener('change', (evt) => {
					renderer.render(scene, camera);
				});
				scene.add(transformControls);
				// grid
				var g = new THREE.GridHelper(400,400);
				g.name = "grid";
				g.position.y = -2;
				g.enable = true
				scene.add(g);
				//
				var e = new THREE.BoxHelper();
				e.material.depthTest = true,
				e.material.transparent = true,
				e.visible = true,
				e.name = "selectionBox";
				// scene.add(e)

				transformControls.attach( ball );
				// transformControls.attach( ball3 );
				container.style.cursor = 'move';
				// 渲染
				renderer.render(scene,camera);
			}
			
		</script>
	</body>
	
</html>